<template>
  <div>
    <div class="myRobot myRobotUserInstall">
      <robotNav></robotNav>
      <div class="myRobotRight">
        <div class="myRobotUserInstall_content">
          <div class="myRobotRight_title">
            <div class="myRobotRight_title_dd">安装</div>
          </div>
          <div class="myRobotUserInstall_content_title">
            <div class="content_title_dd"><span></span>安装到网页</div>
            <div class="content_title_dt">开启安装到网页
              <el-switch
                v-model="value1"
                @change="changeSwitch"
                active-text="开启以后可以被公众访问">
              </el-switch>
            </div>
          </div>
          <div class="myRobotUserInstall_content_txt">
            <div v-for="(item, index) in formattedCode" :key="index" class="content_txt_list">
              <div class="txt_list_dd">{{ item.name }}</div>
              <div class="txt_list_dt">{{ item.code.replace('&lt;', '<') }}</div>
              <div class="txt_list_p">复制以上html代码到你的网页指定位置中</div>
              <div class="txt_list_btn notBlue" @click="copyToClipboard(item.code)"><img src="@a/img/sv92.svg"/>复制</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import robotNav from "@c/common/robotNav/robotNav";
    import { MessageBox, Message } from 'element-ui';
    import {api} from "@/api-js";

    export default {
        data() {
            return {
              value1: false,
              lists: [
                {
                  name: '1. js安装方式',
                  code: '',
                },
                {
                  name: '2. Iframe安装方式',
                  code: '',
                },
              ],
            };
        },
        components: {
          robotNav
        },
        computed: {
          formattedCode() {
            return this.lists.map(item => ({
              name: item.name,
              code: item.code.replace(/&lt;/g, '<').replace(/&gt;/g, '>')
            }));
          }
        },
        mounted() {
          this.getInstallUrl();
        },
        methods:{
          changeSwitch(e){
            if(e){
                api.robot.setJsStatus(this.$store.getters.robotId, 1);
            }else{
              api.robot.setJsStatus(this.$store.getters.robotId, 0);
            }
          },
          copyToClipboard(text) {
            // 使用Clipboard API复制文本到剪贴板
            navigator.clipboard.writeText(text)
              .then(() => {
                Message.success('内容已复制到剪贴板!');
              })
              .catch((error) => {
                Message.info('复制失败!');
              });
          },

          async getInstallUrl(){
            const [e, r] = await api.robot.getInstallUrl(this.$store.getters.robotId);
            if(!e && r){
              if(r.code === 1){
                this.lists[0].code = r.result.js_url;
                this.lists[1].code = r.result.iframe_url;
                this.value1 = Boolean(r.result.is_enable)
              }
            }
          }
        },
    }
</script>


<style>
@import "myRobotUserInstall.css";
</style>

